<template xmlns="http://www.w3.org/1999/html">
  <div class="query-box">
    <ModuleTitle
    :title=title
    :addr=addr
    ></ModuleTitle>
    <!--边框-->
    <div class="line-box">
      <i class="l-line"></i>
      <i class="t-line"></i>
    </div>
    <div class="line-box">
      <i class="t_r_line"></i>
      <i class="r_t_line"></i>
    </div>
    <div class="line-box">
      <i class="l_b_line"></i>
      <i class="b_l_line"></i>
    </div>
    <div class="line-box">
      <i class="r_b_line"></i>
      <i class="b_r_line"></i>
    </div>
    <!--content-->
    <div class="query-con">
      <div class="query-top">
        <el-input v-model="input" placeholder="输入标签查询" clearable class="query-inp"/>
        <el-button :icon="Search" circle />
      </div>
      <div class="query-bot">
        <el-table
            :data="positionData"
            style="width: 100%;margin-right: 1%"
            max-height="77vh"
            stripe
            width="2  vw"
        >
          <el-table-column
              label="序列"
              width="80"
          >
            <template #default = "{ row }">
              {{row.id}}
            </template>
          </el-table-column>
          <el-table-column
              label="所属路段"
              width="100"
          >
            <template #default = "{ row }">
              {{row.belong}}
            </template>
          </el-table-column>
          <el-table-column
              label="位置区间"
              width="180"
          >
            <template #default = "{ row }">
              <span>起始：{{row.posSec[0]}},{{row.posSec[1]}}</span>
              <br>
              <span>终点：{{row.posSec[2]}},{{row.posSec[3]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default = "{ row }">
              <el-button type="primary" :icon="Location" size="small" />
              <el-button type="primary" :icon="Delete" size="small" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ElInput,ElButton, ElTable, ElTableColumn} from "element-plus";
import {Search, Delete, Location} from "@element-plus/icons-vue"
import ModuleTitle from "@/components/Public/ModuleTitle.vue";
import '@/assets/css/base.less'
import '@/assets/css/el-table.css'
import {onMounted, ref, nextTick, reactive} from "vue";
const title = ref('查询定位')
let input = ref('')
let positionData = ref([
  {
    id:'a001',
    belong:'路段1',
    posSec:[125.00,41.71,125.00,41.71],
  },{
    id:'a002',
    belong:'路段2',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a013',
    belong:'路段3',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a014',
    belong:'路段4',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a015',
    belong:'路段5',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a016',
    belong:'路段6',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  },{
    id:'a017',
    belong:'路段7',
    posSec:[125.01,41.71,125.01,41.71],
  }
])
const addr = '/query'

onMounted(()=>{

})

</script>

<style scoped lang="less">
.query-box{
  border: 1px solid #034c6a;
  position: absolute;
  top: 11%;
  left: 72%;
  width: 27%;
  height: 87%;
  z-index: 99;
  box-shadow: 0px 0px 10px #4788fb;
  .query-con{
    .query-top{
      margin:4vh 0 2vh 3vh;
      display: flex;
      justify-content:start;
      height: 20%;
      .query-inp{
        margin-right: 1vh;
        width: 80%;
      }
    }
    .query-bot{
      //更改表头背景颜色
      /deep/.el-table thead tr>th{
        text-align: center;
        background-color: #0c1c30;
        color: white;
      }
      // 更改表格每行背景颜色
      /deep/.el-table tbody tr>td{
        text-align: center;
        background-color: #0c1c30;
        color: white;
        cursor: pointer;
      }
      // 设置鼠标经过时背景颜色
      /deep/.el-table tbody tr:hover>td{
        background-color: #848484 !important;
      }
    }
  }
}
</style>